<!--
bp-static
备品统计
-->
<template>
    <div class="bps-static">
        <chart
        chartId="bpChart"
        :options="bpChartOptions"></chart>
    </div>
</template>

<script>
import {
    getBpStatic, // 备品统计数据接口
} from '@/apis';
import {
    chartFontSize,
} from '@/mixins';

export default {
    name: 'bp-static',
    mixins: [chartFontSize],
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    data() {
        return {
            chartData: [], // 图表数据
        };
    },
    computed: {
        // 图表配置
        bpChartOptions() {
            const {
                size01,
            } = this;
            return {
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        fontSize: 14 * size01,
                    },
                },
                color: ['#5776ff', '#1268ff', '#ff7e50', '#33eec4', '#fcd02d'],
                grid: {
                    top: '3%',
                    bottom: '3%',
                },
                legend: {
                    orient: 'verticalAlign',
                    right: '5%',
                    top: 'middle',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * size01,
                    },
                    itemWidth: 12 * size01,
                    iteHeight: 12 * size01,
                },
                series: [
                    {
                        name: '备品统计',
                        type: 'pie',
                        radius: ['25%', '86%'],
                        center: ['36%', '50%'],
                        data: this.chartData,
                        roseType: 'radius',
                        label: {
                            color: '#fff',
                            position: 'inside',
                            fontSize: 12 * size01,
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)',
                            },
                            smooth: 0.2,
                            length: 10 * size01,
                            length2: 20 * size01,
                        },
                        itemStyle: {
                            shadowBlur: 10 * size01,
                            shadowColor: 'rgba(0, 0, 0, 0.35)',
                        },
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay(idx) {
                            return Math.random() * 200;
                        },
                    },
                ],
            };
        },
    },
    methods: {
        // 获取备品统计数据
        getBpStaticData() {
            getBpStatic().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.chartData = data;
                }
            }).catch((err) => {
                window.console.log('获取备品统计数据', err);
            });
        },
    },
    created() {
        this.getBpStaticData();
    },
};
</script>
<style lang='scss' scoped>
.bps-static {
    width: 100%;
    height: 100%;
}
</style>
